<template>
    <div class="order-container">
        <el-row>
            <el-col :span="24">
                <normal-filter :filterProps="filterProps" />
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addSign">添加</el-button>
        </el-row>
        <el-row class="table-container">
            <Table
                @sizeChange="sizeChange"
                :columnProps="columnProps"
                :tableData="tableData"
                :showHandle="true"
                :showDetailBtn="false"
                :hideModifyBtn="true"
                :pagination="pagination"
                @currentPage="goCurrent"
                @detail="goDetail"
                @delete="del"
            >
            </Table>
        </el-row>
    </div>
</template>

<script>
    import normalFilter from "@/components/NormalFilter";
    import { Message } from "element-ui";
    import Upload from "@/components/UploadFile";
    import Table from "@/components/Table";
    import { getList, delItem } from "@/api/signIn";
    import { pagination, page } from "@/utils/enumConfig";

    export default {
        name: "SignIn",
        components: {
            normalFilter,
            Table,
            Upload,
        },
        data() {
            const filterProps = {
                filterItems: [
                    {
                        type: "input",
                        id: "financialManager",
                        title: "理财经理",
                        placeholder: "请输入",
                        width: 250,
                    },
                    {
                        type: "input",
                        id: "name",
                        title: "客户姓名",
                        placeholder: "请输入",
                        width: 250,
                    },
                    // {
                    //     type: "input",
                    //     id: "nickname",
                    //     title: "微信昵称",
                    //     placeholder: "请输入",
                    //     width: 250,
                    // },
                    {
                        type: "input",
                        id: "phone",
                        title: "电话",
                        placeholder: "请输入",
                        width: 250,
                    },
                    {
                        type: "select",
                        id: "type",
                        title: "类型",
                        placeholder: "请选择",
                        width: 180,
                        defaultValue: "customer",
                        options: [
                            {
                                title: "客户",
                                key: "customer",
                                value: "customer",
                            },
                            {
                                title: "员工",
                                key: "staff",
                                value: "staff",
                            },
                        ],
                    },
                ],
                onFilterChange: (value) => {
                    this.filterParam = value;
                    this.getList({
                        ...value,
                        ...page,
                    });
                },
            };
            const columnProps = [
                // {
                //     title: "微信昵称",
                //     dataIndex: "nickname",
                //     key: "nickname",
                // },
                {
                    title: "客户姓名",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "电话",
                    dataIndex: "phone",
                    key: "phone",
                },
                {
                    title: "理财经理",
                    dataIndex: "financialManager",
                    key: "financialManager",
                    width: 150,
                },
                {
                    title: "活动地点",
                    dataIndex: "activityAddr",
                    key: "activityAddr",
                    width: 100,
                },
                {
                    title: "类型",
                    dataIndex: "type",
                    key: "type",
                    width: 100,
                    render: (row) => {
                        return `<span>${row.type == "customer" ? "客户" : "员工"}</span>`;
                    },
                },
                {
                    title: "签到时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    width: 200,
                },
            ];
            return {
                loading: false,
                showImportModal: false,
                filterProps,
                columnProps,
                list: [],
                tableData: [],
                pagination: this.$_.cloneDeep(pagination),
                filterParam: null,
                show: false,
                curItem: {},
                file: null,
            };
        },
        async created() {
            let { pageIndex } = this.pagination;
            let param = {
                current: pageIndex,
                type: "customer",
            };
            this.getList(param);
        },
        methods: {
            addContent() {
                this.$router.push("/order/add");
            },
            goCurrent(currentIndex) {
                console.log(currentIndex);
                let { pageSize, pageIndex } = this.pagination;
                let param = {
                    ...this.filterParam,
                    current: currentIndex,
                    size: pageSize,
                };
                this.getList(param);
            },
            modify({ id }) {
                this.$router.push({ path: `/order/update/${id}` });
            },
            sizeChange(size) {
                let param = {
                    ...this.filterParam,
                    current: 1,
                    size,
                };
                this.$set(this.pagination, "pageSize", size);
                this.getList(param);
            },
            async getList(param) {
                let { records, size, total, current } = await getList(param),
                    page = this.pagination;
                this.pagination = {
                    ...page,
                    totalElements: total,
                    pageIndex: current,
                };
                console.log("records", records);
                this.tableData = records;
            },
            goDetail({ id }) {
                this.$router.push(`/order/detail/${id}`);
            },
            addSign() {
                this.$router.push(`/signIn/add`);
            },
            async del({ id }) {
                let res = await delItem({ id });
                if (res.code === 1) {
                    this.getList({
                        ...this.filterParam,
                        pageIndex: 1,
                    });
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .order-container {
        width: 100%;
        height: 100%;
        padding: 20px;
        .table-container {
            margin-top: 20px;
        }
        .send-btn {
            margin: 10px 0;
        }
    }
</style>
